import React, { Component } from 'react'
// import "./index.css";
import styles from './index.module.scss'
import { Button, Grid, Modal } from 'antd-mobile'
// console.log(styles);
import { Link } from 'react-router-dom'
import { getUserInfo, logout } from '../../api/user'
import { removeToken } from '../../utils/token'

// 菜单数据
const menus = [
  { id: 1, name: '我的收藏', iconfont: 'icon-coll', to: '/favorate' },
  { id: 2, name: '我的出租', iconfont: 'icon-index', to: '/rent' },
  { id: 3, name: '看房记录', iconfont: 'icon-record', to: '' },
  {
    id: 4,
    name: '成为房主',
    iconfont: 'icon-identity',
    to: ''
  },
  { id: 5, name: '个人资料', iconfont: 'icon-myinfo', to: '' },
  { id: 6, name: '联系我们', iconfont: 'icon-cust', to: '' }
]

export default class My extends Component {
  constructor () {
    super()

    this.state = {
      isLogin: false, // 是否登录
      avatar: '/img/profile/avatar.png', // 头像
      nickname: '游客' // 昵称
    }
  }

  async componentDidMount () {
    const res = await getUserInfo()

    if (res.data.status === 200) {
      this.setState({
        isLogin: true,
        avatar: res.data.body.avatar,
        nickname: res.data.body.nickname
      })
    }
  }

  userLogout = () => {
    Modal.alert('提示', '确定退出吗?', [
      { text: '取消', onPress: null },
      {
        text: '确定',
        onPress: async () => {
          const res = await logout()

          // 清空token
          removeToken()

          // 把登录状态和头像、昵称设置为默认值
          this.setState({
            isLogin: false, // 是否登录
            avatar: '/img/profile/avatar.png', // 头像
            nickname: '游客' // 昵称
          })
        }
      }
    ])
  }

  render () {
    const { avatar, nickname, isLogin } = this.state
    return (
      <div>
        <div className={styles.title}>
          <img
            className={styles.bg}
            src='http://huangjiangjun.top:8088/img/profile/bg.png'
          />
          <div className={styles.info}>
            <div className={styles.myIcon}>
              <img
                className={styles.avatar}
                src={`${process.env.REACT_APP_BASEURL}${avatar}`}
                alt=''
              />
            </div>
            <div className={styles.user}>
              <div className={styles.name}>{nickname}</div>
              {isLogin && (
                <div className={styles.auth}>
                  <span onClick={() => this.userLogout()}>退出</span>
                </div>
              )}
              <div className={styles.edit}>
                {isLogin ? (
                  <>
                    编辑个人资料
                    <span className={styles.arrow}>
                      <i className='iconfont icon-arrow' />
                    </span>
                  </>
                ) : (
                  <Button
                    onClick={() => this.props.history.push('/login')}
                    size='small'
                    type='primary'
                    inline
                  >
                    去登录
                  </Button>
                )}
              </div>
            </div>
          </div>
        </div>
        <Grid
          data={menus}
          columnNum={3}
          hasLine={false}
          square={false}
          renderItem={dataItem => {
            return (
              <Link to={dataItem.to} key={dataItem.id}>
                <div className={styles.menuItem}>
                  <i className={`iconfont ${dataItem.iconfont}`} />
                  <span>{dataItem.name}</span>
                </div>
              </Link>
            )
          }}
        />
        <div className={styles.ad}>
          <img src='http://huangjiangjun.top:8088/img/profile/join.png' />
        </div>
      </div>
    )
  }
}
